<template>
	<div class="pagination">
		<!-- <h1>直接收到的 => 总数:{{total}}、页码:{{pageNo}}、页大小:{{pageSize}}、连续{{continues}}</h1>
		<h1>算出来的 => 总页数:{{totalPage}}、连续起始页码:{{startEnd.start}}、连续结束页码:{{startEnd.end}}</h1> -->
		<button @click="getPageNo(pageNo-1)" :disabled="pageNo==1">上一页</button>
		<button @click="getPageNo(1)" v-show="startEnd.start>1">1</button>
		<span v-show="startEnd.start>2">···</span>

		<button v-for="(_,index) in startEnd.end-startEnd.start+1" 
		:key="index"
		:class="{active:(index+startEnd.start===pageNo)}"
		@click="getPageNo(index+startEnd.start)"
		>
			{{index+startEnd.start}}
		</button>
		<!-- <button>7</button>
		<button class="active">8</button>
		<button>9</button>
		<button>10</button> -->

		<span v-show="startEnd.end<totalPage-1">···</span>
		<button @click="getPageNo(totalPage)" v-show="startEnd.end<totalPage">{{totalPage}}</button>
		<button @click="getPageNo(pageNo+1)" :disabled="pageNo===totalPage">下一页</button>
		<span>共 {{total}} 条</span>
	</div>
</template>

<script>
	export default {
		name: "Pagination",
		props:['total','pageNo','pageSize','continues','getPageNo'],
		computed:{
			//总页数
			totalPage(){
				return Math.ceil(this.total / this.pageSize)
			},
			//计算连续页的：起始、结束
			startEnd(){
				let start = 0 //连续页的起始
				let end = 0 //连续页的结束
				//把所有分页器的数据取出来
				const {total,pageNo,pageSize,continues,totalPage} = this
				//算法开始
				//这是最变态的情况，连续页 > 总页数 （您的要求太高了，臣妾做不到，倾家荡产我陪你）
				if(continues > totalPage){
					start = 1
					end = totalPage
				}else{
					//正常进行左推，右推
					start = pageNo - (continues - 1)/2
					end = pageNo + (continues - 1)/2
					//左重置
					if(start < 1){
						start = 1
						end = continues
					}
					//右重置
					if(end > totalPage){
						start = totalPage - continues + 1
						end = totalPage
					}
				}
				//算法结束
				return {start,end}
			}
		},
		// methods:{
		// 	demo(n){
		// 		console.log('当前页:',n)
		// 	}
		// }
	};
</script>

<style lang="less" scoped>
	.pagination {
		text-align: center;
		h1{
			text-align: left;
		}

		button {
			margin: 0 5px;
			background-color: #f4f4f5;
			color: gray;
			outline: none;
			border-radius: 2px;
			padding: 0 4px;
			vertical-align: top;
			display: inline-block;
			font-size: 13px;
			min-width: 35.5px;
			height: 28px;
			line-height: 28px;
			cursor: pointer;
			box-sizing: border-box;
			text-align: center;
			border: 0;

			&[disabled] {
				color: #c0c4cc;
				cursor: not-allowed;
			}

			&.active {
				cursor: not-allowed;
				background-color: #c81623;
				color: #fff;
			}
		}

		span {
			display: inline-block;
			line-height: 28px;
			font-size: 14px;
			color: gray;
			vertical-align: middle;
		}
	}
</style>